<template>
<div>
     <el-tooltip  v-for="(item,index) in getFunData" :key="index" class="item" effect="dark" :content="item.label" placement="bottom">
          <img   :src="require('@/assets/function/' + item.src )"  class="icon" @click="beforeClick(item)"/>
    </el-tooltip>

</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Chat',['ChatNow','ChatContentNow']),
        getFunData(){
           return this.funData.filter(item => item.type == 1)
        }
     },

     watch:{
       ChatNow:{
         immediate:true,
         deep:true,
         handler(){
            if(this.ChatNow.top == 1)
               {
                     this.funData[1].type = 0
                     this.funData[2].type = 1
                }
             else {
                   this.funData[1].type = 1
                   this.funData[2].type = 0
            }
         }
       }
     },

     data() {
      return {
         funData:[
            {src:'List.png',click:this.DELETECHATLIST,label:'删除聊天列表',type:1},
            {src:'Top.png',click:this.toTop,label:'置顶',type:0},
            {src:'bottom.png',click:this.cancelTop,label:'取消置顶',type:0},
            {src:'Delete.png',click:this.DELETEALLCHATCONTENT,label:'删除聊天内容',type:1},
         ]
      }
     },
     

     methods:{
        ...mapMutations('Chat',['DELETEALLCHATCONTENT','DELETECHATLIST','EDITCHATLIST','SETCHATNOW']),
        toTop(){
           let newChatList = Object.assign({},this.ChatNow)
           newChatList.top = 1
           this.EDITCHATLIST(newChatList)
           this.SETCHATNOW(newChatList)
           this.$message.success('置顶成功')
        },
        cancelTop(){
          let newChatList = Object.assign({},this.ChatNow)
           newChatList.top = null
           this.EDITCHATLIST(newChatList)
           this.SETCHATNOW(newChatList)
           this.$message.success('取消置顶成功')
        },
        beforeClick(fun){
             fun.click(this.ChatNow)
        }
     }
  }
</script>
<style scoped lang='less'>
.icon{
    width: 35px;
    height: 35px;
    margin-right: 5px;
}
</style>